<template>
	<view>
		<u-toast ref="uToast" />
		
		<view class="checkbox">
			<u-subsection 
				:list="list" 
				:current="current" 
				mode="subsection"
				activeColor="#007AFF"
				@change="sectionChange"
				fontSize="17"
				></u-subsection>
		</view>
		<view class="input">
			<view class="left-icon">
				<u-icon name="/static/rmb.png" size="40" color="#303133"></u-icon>
			</view>
			<view class="right-input">
				<input class="aaa" placeholder="0.00" type="digit" placeholder-class="bbb" v-model="input_money"/>
			</view>
		</view>
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		<view>
			<scroll-view scroll-y="true" class="scroll-y">
				
				<view class="expenditure-list" v-show="current == 0">
					<view v-for="(item, index) in expenditure_list" :key="index" style="text-align: center;" @click="selectExpend(item.id)" class="list_item">
						<view class="list-box" :class="[select_expend==item.id ? 'select-index':'']">
							<image slot="icon" class="box-icon" :src="item.icon" mode="" lazy-load="true"></image>
						</view>
						<view class="box-text" :class="[select_expend==item.id ? 'select-text':'']">{{item.text}}</view>
					</view>
				</view>
				
				<view class="expenditure-list" v-show="current == 1">
					<view v-for="(item, index) in income_list" :key="index" style="text-align: center;" @click="selectIncome(item.id)" class="list_item">
						<view class="list-box" :class="[select_income==item.id ? 'select-index':'']">
							<image slot="icon" class="box-icon" :src="item.icon" mode="" lazy-load="true"></image>
						</view>
						<view class="box-text" :class="[select_income==item.id ? 'select-text':'']">{{item.text}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="date-input">
			<view class="left-text">
				<text>日期:</text>
			</view>
			<view class="right-textarea">
				<picker mode="date" fields="day" :value="date" @change="bindDateChange" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{date}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="date-input" v-if="account_list.length != 0">
			<view class="left-text">
				<text>账户:</text>
			</view>
			<view class="right-textarea">
				<picker mode="selector"  :range="account_list" :value="account" @change="getAccount" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{account}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="text-input">
			<view class="left-text">
				<text>备注:</text>
			</view>
			<view class="right-textarea">
				<textarea class="textarea" placeholder="输入备注内容(30字)" maxlength="30" placeholder-class="textarea" v-model="remarks"></textarea>
				<!-- <input class="textarea" placeholder="输入备注内容(30字)" type="text" v-model="remarks" maxlength="30"/> -->
			</view>
		</view>
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" icon="edit-pen" text="保存" @click="saveBill()" v-if="submitType == 0"></u-button>
				<u-button type="success" icon="edit-pen" text="修改" @click="updateBill()"  v-else-if="submitType == 1"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				submitType: '',
				billId: '',
				date: "",
				value: 0,
				list: [{"value": 0,"name": "支出"	},{"value": 1,"name": "入账"}],
				// list: ["支出","收入"],
				show: false,
				current: 0,
				// list_current: 0,
				select_expend: 1, // 默认选中第一个
				select_income: 1, // 默认选中第一个
				input_money: '',
				account: "选择账户（可选）",
				account_list: [],
				remarks: "",
				expenditure_list:[
					{"id":"1","text":"餐饮","icon":"/static/icon/catering.png"},
					{"id":"2","text":"交通","icon":"/static/icon/traffic.png"},
					{"id":"3","text":"服饰","icon":"/static/icon/clothing.png"},
					{"id":"4","text":"购物","icon":"/static/icon/shopping.png"},
					{"id":"5","text":"服务","icon":"/static/icon/service.png"},
					{"id":"6","text":"教育","icon":"/static/icon/education.png"},
					{"id":"7","text":"娱乐","icon":"/static/icon/amusement.png"},
					{"id":"8","text":"运动","icon":"/static/icon/exercise.png"},
					{"id":"9","text":"生活缴费","icon":"/static/icon/life.png"},
					{"id":"10","text":"旅行","icon":"/static/icon/travel.png"},
					{"id":"11","text":"宠物","icon":"/static/icon/pet.png"},
					{"id":"12","text":"医疗","icon":"/static/icon/treatment.png"},
					{"id":"13","text":"保险","icon":"/static/icon/insurance.png"},
					{"id":"14","text":"公益","icon":"/static/icon/helpful.png"},
					{"id":"15","text":"红包","icon":"/static/icon/redEnvelope.png"},
					{"id":"16","text":"转账","icon":"/static/icon/transferMoney.png"},
					{"id":"17","text":"亲属卡","icon":"/static/icon/relatives.png"},
					{"id":"18","text":"其他人情","icon":"/static/icon/humanFeeling.png"},
					{"id":"19","text":"服饰美容","icon":"/static/icon/beauty.png"},
					{"id":"20","text":"酒店","icon":"/static/icon/hotel.png"},
					{"id":"21","text":"亲子","icon":"/static/icon/baby.png"},
					{"id":"22","text":"退还","icon":"/static/icon/return.png"},
					{"id":"23","text":"其他","icon":"/static/icon/other.png"},
				],
				income_list: [
					{"id":"1","text":"生意","icon":"/static/icon/income/business.png"},
					{"id":"2","text":"工资","icon":"/static/icon/income/wages.png"},
					{"id":"3","text":"奖金","icon":"/static/icon/income/bonus.png"},
					{"id":"4","text":"其他人情","icon":"/static/icon/income/humanFeeling.png"},
					{"id":"5","text":"收红包","icon":"/static/icon/income/redEnvelope.png"},
					{"id":"6","text":"收转账","icon":"/static/icon/income/transferMoney.png"},
					{"id":"7","text":"商家转账","icon":"/static/icon/income/merchantTransfer.png"},
					{"id":"8","text":"退款","icon":"/static/icon/income/refund.png"},
					{"id":"9","text":"其他","icon":"/static/icon/income/other.png"}
				]
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			if(data.submitType == 0){
				this.submitType = data.submitType
				this.date = this.getCurrentMonth()
			}else if(data.submitType == 1){
				this.submitType = data.submitType
				this.current = data.state^1
				this.date = data.billDate
				this.remarks = data.remarks
				this.input_money = data.money
				this.billId = data.billId
				if(data.accountName){
					this.account = data.accountName
				}
			}
			this.getUserAccount()
		},
		methods: {
			change(){
				this.show = true;
			},
			sectionChange(index){
				this.current = index;
			},
			selectExpend(index){
				this.select_expend=index;
			},
			selectIncome(index){
				this.select_income=index;
			},
			bindDateChange: function(e) {
			    this.date = e.target.value
			},
			getAccount: function(e) {
				this.account = this.account_list[e.target.value]
			},
			
			getCurrentMonth () {
				const date = new Date()
			    let year = date.getFullYear()
			    let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				let day = date.getDate();
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			
			saveBill () {
				if (this.input_money == null || this.input_money == 0){
					this.$refs.uToast.show({
						type: 'error',
						title: '信息有误',
						message: "输入信息有误",
					})
					return
				}
				
				let userId = uni.getStorageSync('userId')
				let state = this.current^1
				
				let account
				if (this.account != "选择账户（可选）") {
					account = this.account
				}else{
					account = null
				}
				
				const date = new Date()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				let billTime = `${h}:${m}:${s}`
				let billType
				let billIcon
				if(this.current == 0){
					billType = this.expenditure_list[this.select_expend-1].text
					billIcon = this.expenditure_list[this.select_expend-1].icon
				}else {
					billType = this.income_list[this.select_income-1].text
					billIcon = this.income_list[this.select_income-1].icon
				}
				let params = {
						"userId": userId,
						"money": this.input_money,
						"state": state,
						"billType": billType,
						"typeIcon": billIcon,
						"remarks": this.remarks,
						"billDate": this.date,
						"billTime": billTime
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/json',
						   'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/detail/adddetail?accountName="+account,
					method: 'POST',
					data: params,
					success(res) {
						if (res.data.code == 200) {
							_this.$refs.uToast.show({
								type: 'success',
								title: '添加成功',
								message: "添加成功",
								duration: 700,
								complete() {
									uni.switchTab({
										url: '/pages/detail/detail',
										success: (res) => {
											let page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.onLoad();
										}
										
									})
								},
								
							})
						}else{
							_this.$refs.uToast.show({
								type: 'error',
								title: '添加失败',
								message: res.data.errorMessage,
								duration: 1000,
							})
						}
					}
				})
			},
			updateBill (){
				if (this.input_money == null || this.input_money == 0){
					this.$refs.uToast.show({
						type: 'error',
						title: '信息有误',
						message: "输入信息有误",
					})
					return
				}
				
				let userId = uni.getStorageSync('userId')
				let state = this.current^1
				
				let account
				if (this.account != "选择账户（可选）") {
					account = this.account
				}else{
					account = ""
				}
				
				const date = new Date()
				let params = {
						"billId": this.billId,
						"userId": userId,
						"money": this.input_money,
						"state": state,
						"billType": this.expenditure_list[this.select_index-1].text,
						"typeIcon": this.expenditure_list[this.select_index-1].icon,
						"remarks": this.remarks,
						"billDate": this.date,
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/json',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/detail/updatedetail?accountName="+account,
					method: 'POST',
					data: params,
					success(res) {
						_this.$refs.uToast.show({
							type: 'success',
							title: '添加成功',
							message: "添加成功",
							duration: 700,
							complete() {
								uni.switchTab({
									url: '/pages/detail/detail',
									success: (res) => {
										let page = getCurrentPages().pop();
										if (page == undefined || page == null) return;
										page.onLoad();
									}
									
								})
							},
							
						})
					}
				})
			},
			getUserAccount (){
				let userId = uni.getStorageSync('userId')
				let params = {
					"userId": userId
				}
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')
					},
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/useraccount",
					method: 'POST',
					data: params,
					success(res) {
						_this.account_list = res.data.data						
					}
				})
				
			},
		}
	}
</script>

<style>
	.checkbox{
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		width: 300rpx;
		margin-top: 100rpx;
		margin-left: 30rpx;
	}
	.input{
		margin-top: 40rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.left-icon{
		width: 100rpx;
	}
	.right-input{
		width: 550rpx;
		height: 90rpx;
	}
	.aaa{
		height: 80rpx; 
		min-height: 60rpx;
		font-size: 80rpx;
	}
	.bbb{
		height: 80rpx;
		min-height: 60rpx;
		font-size: 80rpx;
	}
	.text-input{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.left-text{
		width: 100rpx;
		font-size: 40rpx;
		color: #303133;
		display: flex;
		align-items: flex-start;
	}
	.right-textarea{
		width: 550rpx;
		display: flex;
		align-items: flex-start;
	}
	.textarea{
		font-size: 40rpx;
		height: 170rpx;
		
		border-style: solid;
		border-color: #8a8a8a;
		border-radius: 12rpx;
	}
	.date-input{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.scroll-y{
		height: 320rpx;
		background-color: #f4f4f5;
	}

	.expenditure-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.list_item{
		width: 25%;
		height: 50%;
	}
	.list-box{
		background-color: #8a8a8a;
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 100%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; 
		
		width: 110rpx;
		height: 110rpx;
		display:flex; 
		justify-content:center;
		align-items:center;
		margin-top: 10rpx;
	}
	.box-text{
		font-size: 30rpx;
		color: #8a8a8a;
	}
	.box-icon{
		width: 55rpx;
		height: 55rpx;
	}
	.drivider{
		/* margin-left: 30rpx;
		margin-right: 30rpx; */
		
		height: 20rpx;
		background-color: #c8c9cc;
		/* margin-top: 30rpx; */
	}
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}
	.submit-button{
		width: 400rpx;
		height: 100rpx;
		font-size: 40rpx;
	}
	.select-index{
		background: #3c9cff;
	}
	.select-text{
		color: #303133;
	}
</style>
